<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tables</title>
<link rel="stylesheet" type='text/css' href='css/style.css' />
<script type="text/javascript" src="js/rightclick.js"></script>
<script type="text/javascript">

/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

function checkboxlimit(checkgroup, limit){
	for (var i=0; i<checkgroup.length; i++){
		checkgroup[i].onclick=function(){
		var checkedcount=0;
		for (var i=0; i<checkgroup.length; i++)
			checkedcount+=(checkgroup[i].checked)? 1 : 0;
		if (checkedcount>limit){
			alert("You can only select a maximum of "+limit+" checkboxes");
			this.checked=false;
			}
		};
	}
}

</script>
</head>
<body>

	<div class="container" >
	
	<div class="navbar">
	<p>
	<a href="HostServlet" class="navbutton">Home</a> | <a href="AddCustomer" class="navbutton">Customers</a> | <a href="Reservation" class="navbutton">Reservations</a>
	</p>
	</div>
	
			<form id="transfer" name="transfer">
			<form action="ViewTables">
			<table  class="customertable">
			
			<thead>
			<tr>
				<th>Table #: </th><th>Assigned Employee: </th><th>Assigned Customer: </th><th></th>
			</tr>
			</thead>
			<tbody>
			<c:forEach items="${ tables }" var="table">
					<tr>
						<td>
							${table.id}
						</td>
						<td>
							<c:choose>
								<c:when test="${ table.serverId > 0 }">
									<a href="ViewTables?removerserver=${table.serverId}x${table.id}">${table.serverId}</a>
									<input type="checkbox" name="checkboxservers" value="${table.serverId}x${table.id}" />
								</c:when>
								<c:otherwise>
								
									
											<select name="serverselect">
										
												<c:forEach items="${servers}" var="server">
														<option value="${server.id}x${table.id}">${server.id}</option>
												</c:forEach>
											</select>
											<input type="submit" name="dropdown" value="Assign">
										
								 
									
								</c:otherwise>
							</c:choose>
						</td>
						<td>
							<c:choose>
								<c:when test="${ table.customerId > 0 }">
									<a href="ViewTables?removecustomer=${table.customerId}x${table.id}">${table.customerName}</a>
								</c:when>
								<c:otherwise>
									<a style="text-decoration: none;" href="ViewTables?assigncustomer=${table.id}">Assign Customer</a>
								</c:otherwise>
							</c:choose>
						</td>
						<td style='background: transparent; border: none;'>
							<a class="removebutton" href="ViewTables?removetable=${table.id}">Remove</a>
						</td>
					</tr>
					
			</c:forEach>
			
			<tr style='background: transparent; border: none;'>
				<td style='background: transparent; border: none;'></td>
				<td style='background: transparent; border: none;'><input class="swapbutton" type="submit" name="checkboxswap" value="Swap" /></td>
				<td style='background: transparent; border: none;'></td>
			</tr>

			<tr>
			<td style='background: transparent; border: none;'></td>
			</tr>
			
			<tr>
				<td colspan="3" style="text-align: left; background: transparent; border: none;">
					<a href="ViewTables?add=newtable" class="loginbutton">Add Table</a>
				</td>
			</tr>
			<tbody>
			</table>
			</form>
			</form>
	
			<script type="text/javascript">

			checkboxlimit(document.forms.transfer.checkboxservers, 2);
			
			</script>
	
	</div>
		
		<c:if test="${ assigncustomer != null }">
			Assigning Customer for Table #${ assigncustomer }: 
			<FORM METHOD=POST ACTION="ViewTables">
				Find Customer: <INPUT TYPE=TEXT NAME="lastname" SIZE=20>
				<input type="hidden" VALUE="${ assigncustomer }" name="assigncustomer" />
				<INPUT TYPE=SUBMIT VALUE="Find" name="findcustomer">
			</FORM>
			
			<c:if test="${ searched != null }">
			
			<table  class="customertable">
			<thead>
				<tr>
					<th>First</th><th>Last</th><th>Address</th><th>Phone</th><th></th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${ customerresult }" var="customer">
					<tr><td>${customer.firstName}</td><td>${customer.lastName}</td><td>${customer.address}</td><td>${customer.phoneNumber}</td><td id='opaq'><a class='tablebutton' href="ViewTables?assigncustomerfinal=${customer.id}x${assigncustomer}">Assign to Table #${assigncustomer}</a></td></tr>
				</c:forEach>
			</tbody>
			</table>
			
			</c:if>

		</c:if>
		
	<div>
	
	</div>

</body>
</html>